<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>iMenu Widget Documentation</title>
    <link rel="stylesheet" href="../css/style.css" type='text/css' media='all' />
    <link rel="stylesheet" href="../css/iphone.css" type='text/css' media='all' />
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery-ui.js"></script>
    <script type="text/javascript" src="../js/jquery.iphone.js"></script>
    <script type="text/javascript" src="../js/ui/ui.iMenu.js"></script>
		
	<!-- Highlight code -->
	<script type="text/javascript" src="http://scripts.hohli.com/brush/shCore.js"></script>
	<script type="text/javascript" src="http://scripts.hohli.com/brush/shBrushJScript.js"></script>
	<script type="text/javascript" src="http://scripts.hohli.com/brush/shBrushXml.js"></script>
	<script type="text/javascript" src="http://scripts.hohli.com/brush/shBrushPhp.js"></script>
	<link type="text/css" rel="stylesheet" href="http://scripts.hohli.com/brush/styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="http://scripts.hohli.com/brush/styles/shThemeDefault.css"/>
	<script type="text/javascript">
		SyntaxHighlighter.config.clipboardSwf = 'http://scripts.hohli.com/brush/clipboard.swf';
		SyntaxHighlighter.all();
	</script>
	
    <script type="text/javascript">
    $(document).ready(function(){        
        $(".menu").iMenu();
    });
    </script>
	<style type="text/css">
		body {
			background:#ccc;
		}
		.syntaxhighlighter {
			margin: 0 !important;
		}
	</style>
</head>

<body class="iphone shadow">
    <div class="titlebar">
        iGallery Widget
    </div>
    <div class="list">
		<h2>Required</h2>
		<ul class="inlist">
			<li>jQuery UI Core</li>
		</ul>
			
		<h2>Example</h2>
		<pre class="brush: xml;">
		    &lt;link rel="stylesheet" href="css/iphone.css" type='text/css' media='all' /&gt;
		    &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
		    &lt;script type="text/javascript" src="js/jquery-ui.js"&gt;&lt;/script&gt;
		    &lt;script type="text/javascript" src="js/ui/ui.iMenu.js"&gt;&lt;/script&gt;
		    &lt;script type="text/javascript"&gt;
			$(document).ready(function(){
				// jquery.iphone.js have autoloader, but you can use
				// alternative method of init widget
		    	$(".menu").iMenu();
		    });
		    &lt;/script&gt;
            &lt;ul class="menu"&gt;
                &lt;li&gt;&lt;a href="#" title="Label 1" class="arrow"&gt;Label 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" title="Label 2"&gt;Label 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" title="Label 3"&gt;Label 3&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" title="Label 4"&gt;Label 4&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
		</pre>

		<h2>Demo</h2>
	    <ul class="menu">
	        <li><a href="#" title="Label 1" class="arrow">Label 1</a></li>
	        <li><a href="#" title="Label 2">Label 2</a></li>
	        <li><a href="#" title="Label 3">Label 3</a></li>
	        <li><a href="#" title="Label 4">Label 4</a></li>
	    </ul>
	    <ul class="menu">
	        <li><a href="#" title="Label 1" class="arrow">Single element</a></li>
	    </ul>
	    <ul class="menu">
	        <li><a href="#" title="Label 1" class="arrow">Label 1</a></li>
	        <li><a href="#" title="Label 2">Label 2</a></li>
	        <li><a href="#" title="Label 3">Label 3</a></li>
	        <li><a href="#" title="Label 4">Label 4</a></li>
	    </ul>
	</div>
</body>
</html>
